<div class="oni-smartgrid">
    <table>
        <colgroup>
            <col ms-repeat-column="columns" 
                 ms-class="oni-smartgrid-{{column.toggle? 'show': 'hide'}}"
                 ms-css-width="column.width"/>
        </colgroup>
        <thead class="oni-smartgrid-header">
            <tr class="oni-smartgrid-header-fixed" 
                ms-if="isAffix"
                ms-css-top="_headerTop" 
                ms-visible="_fixHeaderToggle" 
                ms-css-position="_position" 
                ms-css-width="_gridWidth">
                <th ms-repeat-column="columns" 
                    ms-visible="column.toggle" 
                    ms-css-width="column._fixWidth" 
                    ms-css-text-align="column.align" 
                    ms-class="{{column.customClass}}"
                    ms-class-1="oni-state-hidden: _hiddenAffixHeader(column, allChecked)">
                    {{column.name|sanitize|html}}
                    <span  ms-click="sortColumn(column, $index, $event)"
                           ms-if="column.sortable" 
                           ms-class="oni-helper-{{column.sortTrend}}">
                        <span class="oni-helper-sort-top"></span>
                        <span class="oni-helper-sort-bottom"></span>
                    </span>
                </th>
            </tr>
            <tr>
                <th ms-repeat-column="columns" 
                    ms-visible="_toggleColumn(column.toggle, $index)" 
                    ms-css-text-align="column.align" 
                    ms-class="{{column.customClass}}"
                    ms-class-1="oni-state-hidden: _hiddenAffixHeader(column, allChecked)">
                    {{column.name|sanitize|html}}
                    <span  ms-click="sortColumn(column, $index, $event)"
                           ms-if="column.sortable" 
                           ms-class="oni-helper-{{column.sortTrend}}">
                        <span class="oni-helper-sort-top"></span>
                        <span class="oni-helper-sort-bottom"></span>
                    </span>
                </th>
            </tr>
        </thead>
        <tbody class="oni-smartgrid-body">
        </tbody>
        <tfoot class="oni-smartgrid-footer">
            <tr>
                <td ms-attr-colspan="{{columns.size()}}" class="oni-smartgrid-pager-wrapper">
                    <div ms-visible="pageable && _pagerShow">
                        <div ms-if="pageable" ms-widget="pager, $, $pagerConfig"></div>
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>
    <div ms-widget="loading"></div>
</div>
MS_OPTION_EJS
<&- var trl = @data.length &>
<&- if(!trl) { &>
    <tr><td colspan="<&=@columns.length&>"><div class="oni-smartgrid-nodata"><&=@noResult&></div></td></tr>
<&- } else { &>
    <&- for(var i=0, tr; i<trl; i++) { &>
        <&- tr = @data[i]; 
            var selectedClass = "";
            if (i%2==0) {
                selectedClass = "oni-smartgrid-odd";

            } else {
                selectedClass = "oni-smartgrid-even"
            } 
            if (tr.selected && @checkRow) {
                selectedClass += " oni-smartgrid-selected"
            }
            if (tr.disable) {
                selectedClass += " oni-state-disabled"
            }&>
        <tr id="<&=tr.$id&>" class="<&=selectedClass&>" ms-hover="oni-state-hover">
            <&- for(var j=0, tdl=@columns.length, td; j<tdl; j++) { &>
                <&- td=@columns[j].$model; 
                    var display=td.toggle ? "display:table-cell;" : "display:none;", 
                    textAlign="text-align:"+td.align, style=display+textAlign,
                    customClass = td.customClass || "",
                    format = td.format;&>
                <td style="<&= style &>" class="<&= customClass &>">
                    <&= format(@vmId, td.key , i, tr[td.key], tr, tr.disable) &>
                </td>
            <& } &>
        </tr>  
    <& } &>  
<& } &>    
